<script setup lang='ts'>
  import { nextTick, reactive, ref } from 'vue';
  import { gamesApi } from '@/api/controller';
  import { ToastSuccess, ToastWarning, Toastloading, allNumber } from '@/utils/public';
  const formLabelWidth = '160px'
  const dataForm = ref();
  const $emit = defineEmits(['updateList'])
  const action = reactive({
    dialogFormVisible:false,
    disabled:false,
    title:'',
    list:[] as Array<any>,
    dialogType:''
  }),
  options = [
    {label:'关闭',value:0},
    {label:'开启',value:1},
  ]
  interface formQuert {
    is_open:number
    gift_ids:string
  }
  let form = reactive({} as formQuert)
  const formRules = {
    is_open: [{ required: true, message: "请选择是否展示", trigger: "blur" }],
  }
  const handleSubmit = async()=>{
    dataForm.value.validate(async(valid:any)=>{
      if(!valid) return
      const { is_open=0, gift_ids='' } = form
      if(is_open == 0 && gift_ids == '') return ToastWarning('最少输入一个礼物ID')
      const loading = Toastloading()
      await gamesApi.addWishLuckExGiftList(form).then(()=>{
        ToastSuccess('投放展示编辑成功')
        loading.close()
        $emit('updateList')
        closeDialog()
      }).catch(()=>{
        loading.close()
      })
    })
  }
  const getInfo = async()=>{
    const res = await gamesApi.getWishLuckExGiftList()
    const { is_open=0, gift_ids='' } = res?.data
    Object.assign(form,{
      gift_ids,
      is_open
    })
  }
  const getList = async()=>{
    const res = await gamesApi.getLuckExGiftForPoolList()
    const { data=[] } = res
    action.list = data
  }
  const openDialog = async(dialogType:string='')=> {
    if(dialogType == 'list') {
      action.title ='投放记录'
      action.disabled = true
      await getList()
    } else {
      action.title ='投放展示开关'
      action.disabled = false
      await getInfo()
    }
    action.dialogType = dialogType
    action.dialogFormVisible = true
  }
  const closeDialog = ()=>{
    action.dialogType == 'form' ? form = reactive({} as formQuert) : ''
    nextTick(() => {
      dataForm.value.clearValidate();
    });
    action.dialogFormVisible = false
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <div>
    <el-dialog
      top="10vh"
      class="xm-dialog input-width"
      v-model="action.dialogFormVisible"
      :close-on-click-modal="action.disabled"
      :show-close="action.disabled"
      :close-on-press-escape="action.disabled"
      :width="action.dialogType == 'list'?'55%':'40%'"
      :title="action.title">
        <el-table
          class="xm-main xm-TableCenter"
          :data="action.list"
          border
          v-if="action.dialogType == 'list'"
        >
          <el-table-column width="80" prop="pool_id" label="礼物池ID" />
          <el-table-column min-width="120" show-overflow-tooltip prop="pool_name" label="礼物池名称" />
          <el-table-column width="80" prop="gift_id" label="礼物ID" />
          <el-table-column min-width="120" show-overflow-tooltip prop="gift_name" label="礼物名称" />
          <el-table-column width="100" prop="gift_price" label="礼物价格" />
          <el-table-column width="100" prop="nums" label="投放数量" />
          <el-table-column width="100" prop="less_num" label="剩余数量" />
          <el-table-column width="180" prop="created_at" label="投放时间" />
        </el-table>
        <el-form
         ref="dataForm"
         :model="form"
         :rules="formRules"
         v-if="action.dialogType == 'form'"
         >
        <el-form-item :label-width="formLabelWidth" label="投入礼物">
          <el-input v-model="form.gift_ids" placeholder="请输入投入礼物" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" prop="is_open" label="是否展示">
          <el-select v-model="form.is_open" placeholder="请选择是否展示">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template v-if="!action.disabled" #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
